
<!DOCTYPE html>
<html  class="iframe-h">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>邮件管理</title>
    <!--<link rel="stylesheet" type="text/css" href="./lib/layui/css/layui.css"/>-->
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/index.css">
<script type="text/javascript" src="./verify.js"></script>
</head>
<body  class="iframe-h">
<div class="wrap-container email-wrap clearfix">
    <div class="row">
        <div class="email-edge col-lg-2">
            <button class="layui-btn layui-btn-normal email-write-btn" id="write-email-btn">写信</button>
            <dl class="email-folder">
                <dt>文件夹</dt>
                <dd>
                    <a href="javascript:;" data-url="email-list.html"><i class="iconfont">&#xe69b;</i>收件箱<span class="layui-badge f-r">12</span></a>
                </dd>
                <dd>
                    <a href="javascript:;" data-url="email-list.html"><i class="iconfont">&#xe69f;</i>发信<span class="layui-badge layui-bg-cyan f-r">6</span></a>
                </dd>
                <dd>
                    <a href="javascript:;" data-url="email-list.html"><i class="iconfont">&#xe6a2;</i>草稿<span class="layui-badge layui-bg-blue f-r">2</span></a>
                </dd>
                <dd>
                    <a href="javascript:;" data-url="email-list.html"><i class="layui-icon">&#xe640;</i><span class="layui-badge layui-bg-green f-r">4</span>垃圾箱</a>
                </dd>
            </dl>
            <dl class="email-classify">
                <dt>分类</dt>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-blue">&#xe617;</i>工作</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-green">&#xe617;</i>文档</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-wran">&#xe617;</i>社交</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-red">&#xe617;</i>广告</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-gray">&#xe617;</i>客户端</a>
                </dd>
            </dl>
            <dl class="email-label">
                <dt>标签</dt>
                <dd>
                    <button class="layui-btn layui-btn-primary layui-btn-small">朋友</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">工作</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">孩子</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">关系</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">家庭</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">电影</button>
                </dd>

            </dl>
        </div>
        <div class="col-lg-10">

            <div class="layui-fluid">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="email-content-title layui-form">
                                <span class="write-title">收件箱 (16)</span>
                            </div>
                            <div class="layui-card-body ">
                                <form class="layui-form layui-col-space5">
                                    <div class="layui-inline layui-show-xs-block">
                                        <input class="layui-input"  autocomplete="off" placeholder="开始日" name="start" id="start">
                                    </div>
                                    <div class="layui-inline layui-show-xs-block">
                                        <input class="layui-input"  autocomplete="off" placeholder="截止日" name="end" id="end">
                                    </div>
                                    <div class="layui-inline layui-show-xs-block">
                                        <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-inline layui-show-xs-block">
                                        <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                                    </div>
                                </form>
                            </div>
                            <div class="layui-card-header">
                                <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
                                <!--<button class="layui-btn" onclick="xadmin.open('添加用户','./articleadd.html',800,600)"><i class="layui-icon"></i>添加</button>-->
                            </div>
                            <div class="layui-card-body layui-table-body layui-table-main">
                                <table class="layui-table layui-form">
                                    <thead>
                                    <tr>
                                        <th><input type="checkbox" name="" lay-skin="primary" lay-filter="emailAllChoose"></th>
                                        <th class="hidden-xs">来源</th>
                                        <th>名称</th>
                                        <th class="hidden-xs">创建时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><input type="checkbox" name="" lay-skin="primary"></td>
                                        <td class="hidden-xs">淘宝网</td>
                                        <td><a href="javascript:;">史上最全！淘宝双11红包疯抢攻略！</a></td>
                                        <td class="hidden-xs">1989-10-14</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="" lay-skin="primary"></td>
                                        <td class="hidden-xs">淘宝网</td>
                                        <td>亲，双11来啦！帮你挑货，还送你4999元红包！仅此一次！</td>
                                        <td class="hidden-xs">1989-10-14</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="" lay-skin="primary"></td>
                                        <td class="hidden-xs">Amaze UI</td>
                                        <td>Amaze UI Beta2 发布</td>
                                        <td class="hidden-xs">1989-10-14</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="" lay-skin="primary"></td>
                                        <td class="hidden-xs">玩具</td>
                                        <td>历史邮件</td>
                                        <td class="hidden-xs">1989-10-14</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="" lay-skin="primary"></td>
                                        <td class="hidden-xs">玩具</td>
                                        <td>历史邮件</td>
                                        <td class="hidden-xs">1989-10-14</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="" lay-skin="primary"></td>
                                        <td class="hidden-xs">玩具</td>
                                        <td>历史邮件</td>
                                        <td class="hidden-xs">1989-10-14</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="" lay-skin="primary"></td>
                                        <td class="hidden-xs">玩具</td>
                                        <td>历史邮件</td>
                                        <td class="hidden-xs">1989-10-14</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="" lay-skin="primary"></td>
                                        <td class="hidden-xs">玩具</td>
                                        <td>历史邮件</td>
                                        <td class="hidden-xs">1989-10-14</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="" lay-skin="primary"></td>
                                        <td class="hidden-xs">玩具</td>
                                        <td>历史邮件</td>
                                        <td class="hidden-xs">1989-10-14</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" name="" lay-skin="primary"></td>
                                        <td class="hidden-xs">玩具</td>
                                        <td>历史邮件</td>
                                        <td class="hidden-xs">1989-10-14</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="layui-card-body ">
                                <div class="page">
                                    <div>
                                        <a class="prev" href="">&lt;&lt;</a>
                                        <a class="num" href="">1</a>
                                        <span class="current">2</span>
                                        <a class="num" href="">3</a>
                                        <a class="num" href="">489</a>
                                        <a class="next" href="">&gt;&gt;</a></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'laypage', 'jquery','layer','laydate'], function() {
        var form = layui.form,
            layer = layui.layer,
            laypage = layui.laypage,
            $ = layui.jquery;
        var laydate = layui.laydate;

        // 监听全选
        form.on('checkbox(checkall)', function(data){

            if(data.elem.checked){
                $('tbody input').prop('checked',true);
            }else{
                $('tbody input').prop('checked',false);
            }
            form.render('checkbox');
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

        //获取当前iframe的name值
        var iframeObj = $(window.frameElement).attr('name');

        $('#write-email-btn').on('click',function(){
            parent.page("写邮件", 'email-write.html', iframeObj, w = "700px", h = "600px");
        })
        //列表
        $('.email-folder').on('click','a',function(){
            var url=$(this).attr('data-url');
            $('#iframeEmail').attr('src',url);

        })
        $('.email-tool-btn .f-l').on('mouseenter','button',function(){
            var title=$(this).attr('data-title');
            var id='#'+$(this).attr('id');
            layer.tips(title, id, {
                tips: [1, '#444c63'],
                time: 1000
            });
        })
        //分页
        /*laypage({
            cont: 'email-page'
            ,pages: 10
            ,skin: '#1E9FFF'
        });*/
        form.on('checkbox(emailAllChoose)', function(data) {
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function(index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        form.render();
        //非手机端，设置高度
        if(window.innerWidth>=768){
            $('.email-content').css('height',window.innerHeight-30);
        }
        $(window).resize(function(){
            $('.email-content').css('height',window.innerHeight-30);
        })
    });
</script>
</body>
</html>